<template>
  <el-container class="h-screen bg-gray-50">
    <!-- 侧边栏 -->
    <el-aside width="240px" class="bg-gray-900 shadow-xl">
      <div class="h-16 flex items-center justify-center bg-gray-800 border-b border-gray-700">
        <img v-if="systemLogo" :src="systemLogo" class="h-8 w-8 mr-2 object-contain" alt="logo" />
        <h3 class="text-white text-lg font-semibold">{{ systemName }}</h3>
      </div>
      <el-menu
        :default-active="$route.path"
        router
        background-color="#111827"
        text-color="#d1d5db"
        active-text-color="#3b82f6"
        class="border-r-0"
      >
        <template v-for="menu in userMenus" :key="menu.id">
          <!-- 有子菜单的情况 -->
          <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.path">
            <template #title>
              <el-icon v-if="menu.icon">
                <component :is="menu.icon" />
              </el-icon>
              <span>{{ menu.name }}</span>
            </template>
            <el-menu-item
              v-for="child in menu.children.filter(c => c.type !== 3)"
              :key="child.id"
              :index="child.path"
              class="hover:bg-gray-800 transition-colors"
            >
              <el-icon v-if="child.icon">
                <component :is="child.icon" />
              </el-icon>
              <span class="ml-2">{{ child.name }}</span>
            </el-menu-item>
          </el-sub-menu>
          <!-- 没有子菜单的情况 -->
          <el-menu-item
            v-else-if="menu.type !== 3"
            :index="menu.path"
            class="hover:bg-gray-800 transition-colors"
          >
            <el-icon v-if="menu.icon">
              <component :is="menu.icon" />
            </el-icon>
            <span class="ml-2">{{ menu.name }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>

    <!-- 主内容区 -->
    <el-container>
      <!-- 顶部导航 -->
      <el-header
        class="h-16 bg-white shadow-sm border-b border-gray-200 flex items-center justify-between px-6"
      >
        <div class="flex items-center">
          <el-breadcrumb separator="/" class="text-sm">
            <el-breadcrumb-item :to="{ path: '/' }" class="text-gray-500 hover:text-blue-600">首页</el-breadcrumb-item>
            <el-breadcrumb-item class="text-gray-700 font-medium">{{ $route.meta.title }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div class="flex items-center">
          <el-dropdown @command="handleCommand" class="cursor-pointer">
            <div
              class="flex items-center space-x-3 hover:bg-gray-50 px-3 py-2 rounded-lg transition-colors"
            >
              <el-avatar
                :size="32"
                :src="userInfo.avatar || defaultAvatar"
                class="ring-2 ring-gray-200"
              />
              <span class="text-gray-700 font-medium">{{ userInfo.realName || userInfo.username }}</span>
              <el-icon class="text-gray-400">
                <ArrowDown />
              </el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu class="mt-2">
                <el-dropdown-item command="profile" class="hover:bg-gray-100">
                  <el-icon>
                    <User />
                  </el-icon>个人中心
                </el-dropdown-item>
                <el-dropdown-item command="logout" divided class="hover:bg-gray-100 text-red-600">
                  <el-icon>
                    <SwitchButton />
                  </el-icon>退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 主内容 -->
      <el-main class="p-6 bg-gray-50 overflow-auto">
        <div class="mx-auto">
          <router-view />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { computed, ref, onMounted, provide } from "vue";
import { useRouter } from "vue-router";
import { useAuthStore } from "@/stores/auth";
import { ElMessageBox } from "element-plus";
import { getSystemConfig } from "@/api/config";

const router = useRouter();
const authStore = useAuthStore();

// 从auth store获取用户菜单数据
const userMenus = computed(() => {
  return authStore.userMenus || [];
});

const userInfo = computed(() => authStore.userInfo);
const defaultAvatar =
  "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";

const systemName = ref("后台管理系统");
const systemLogo = ref("");

// 从系统配置获取系统名称和logo
const loadSystemName = async () => {
  try {
    const data = await getSystemConfig({ key: "system_config" });
    if (data && data.value) {
      const config = JSON.parse(data.value);
      if (config.systemName) {
        systemName.value = config.systemName;
        // 设置页面标题
        document.title = config.systemName;
      }
      if (config.logo) {
        systemLogo.value = config.logo;
      }
    }
  } catch (error) {
    // 获取系统配置失败处理
    document.title = systemName.value;
  }
};

const handleCommand = (command) => {
  if (command === "logout") {
    ElMessageBox.confirm("确定要退出登录吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      authStore.logout();
    });
  } else if (command === "profile") {
    // 跳转到个人中心
    router.push("/profile");
  }
};

// 提供刷新系统名称的方法给子组件
provide("refreshSystemName", loadSystemName);

// 组件挂载时加载系统名称
onMounted(() => {
  loadSystemName();
});
</script>

<style scoped>
/* 使用Tailwind CSS替代原有样式 */
</style>